<template>
  <div id="noticelist">
    <!-- 引入头部 -->
    <navigationBar></navigationBar>
    <!-- 下方主体部分 -->
    <!-- 最外层盒子：浏览器盒子 -->
    <div class="container">
      <div class="section">
        <!-- 导航面包屑 -->
        <div class="header_crumb">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style=" font-size:14px"
          >
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公告通知</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 公告列表区域 -->
        <div class="noticelist">
          <ul>
            <li
              v-for="(item, index) in noticeList"
              :key="index"
              @click="toNotice(index)"
            >
              <span>{{ item.title }}</span>
              <span>{{ item.date }}</span>
            </li>
          </ul>
          <!-- 分页标签 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <right></right>
    <!-- footer尾部区域 -->
    <foot></foot>
  </div>
</template>

<script>
import navigationBar from "../../components/navigationBar";
import foot from "../../components/footer.vue";
import right from "../../components/common/right_logo";
export default {
  components: {
    navigationBar,
    foot,
    right
  },
  data() {
    return {
      noticeList: [
        {
          title: "【公告】工品汇荣获“2019中国集采供应链优秀企业...",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回....",
          date: "2019-09-09"
        },
        { title: " 【公告】工品汇全国会员日—上海站", date: "2019-09-09" },
        {
          title: " 【公告】工品汇荣获“2019中国集采供应链优秀企业...",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回....",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回....",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回....",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回...【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回....",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..聚工品，汇共赢 | O2O会员伙伴们，欢迎回..",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回..聚工品，汇共赢 | O2O会员伙伴们，欢迎回..",
          date: "2019-09-09"
        },
        {
          title:
            " 【公告】聚工品，汇共赢 | O2O会员伙伴们，欢迎回.聚工品，汇共赢 | O2O会员伙伴们，欢迎回...",
          date: "2019-09-09"
        }
      ] //公告栏选项列表
    };
  },
  methods: {
    toNotice() {
      this.$router.push({ path: "/noticedetail", name: "noticedetail" });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: rgb(238, 232, 232);
  .section {
    width: 1200px;
    // min-height: 560px;
    margin: 0 auto;

    .header_crumb {
      height: 40px;
      display: flex;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding-left: 10px;
    }
    .noticelist {
      width: 100%;
      //   min-height: 560px;
      background-color: #fff;
      padding: 15px;
      box-sizing: border-box;
      ul {
        margin-left: -30px;
        margin-top: -4px;

        li {
          list-style: none;
          width: 100%;
          height: 48px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(76, 76, 76, 1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          & span:nth-of-type(1) {
            width: 76%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
          & span:nth-of-type(2) {
            display: inline-block;
            width: 120px;
            margin-right: 20px;
          }
        }
      }
      .pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
